{extend name="base"/}
{block name="resources"}

{/block}

{block name="main"}
<div  class="layui-form ns-form" id="app">
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>房型名称：</label>
        <div class="layui-input-block">
            <input type="text" name="type_name" lay-verify="required" class="layui-input ns-len-long">
        </div>
    </div>

    <div class="layui-form-item" v-for="(item,index) in facilities">
        <label class="layui-form-label"><span class="required">*</span>{{item.title}}：</label>
        <div class="layui-input-block">
            <input type="text"  v-model="item.value" lay-verify="required" class="layui-input ns-len-long">
        </div>
    </div>

    <!--<div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>入驻人数：</label>
        <div class="layui-input-block">
            <input type="number" name="occupancy" value="2" lay-verify="required|num" class="layui-input ns-len-short">
        </div>
        <div class="ns-word-aux">入驻人数必须为整数</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>床：</label>
        <div class="layui-input-block">
            <input type="text" name="bed" lay-verify="required" class="layui-input ns-len-long">
        </div>
        <div class="ns-word-aux">床的信息例如:1张大床房</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>面积：</label>
        <div class="layui-input-block">
            <input type="text" name="area" lay-verify="required" class="layui-input ns-len-long">
        </div>
        <div class="ns-word-aux">例如:8-10m²</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>楼层：</label>
        <div class="layui-input-block">
            <input type="text" name="floor" lay-verify="required" class="layui-input ns-len-long">
        </div>
        <div class="ns-word-aux">例如:1-5层</div>
    </div>

    <div class="layui-form-item" id="promotion_list">
        <label class="layui-form-label"><span class="required">*</span>其他信息：</label>
        <div class="layui-input-block" style="display: flex">
            {foreach $facilities as $facilities_k => $facilities_v}
            <a class="ns-item-block ns-item-block-hover-a">
                <div class="ns-item-block-wrap">
                    <div class="ns-item-pic">
                        <img src="{:img($facilities_v['icon'])}" />
                    </div>
                    <div class="ns-item-con">
                        <div class="ns-item-content-title">{$facilities_v['title']}</div>
                    </div>
                </div>
                <div class="ns-input-box">
                    <input type="checkbox" value="{$facilities_v['name']}" class="ns-input-checkbox" lay-filter="is_checked" lay-skin="primary">
                </div>
            </a>
            {/foreach}
        </div>
    </div>-->

    <div class="ns-form-row">
        <button type="button" class="layui-btn ns-bg-color" lay-submit lay-filter="save">保存</button>
        <button class="layui-btn layui-btn-primary" onclick="window.location.href='{:addon_url(\"hotel://hotel/roomtype/lists\")}'">返回</button>
    </div>
</div>
{/block}

{block name="script"}
<script src="STATIC_JS/vue.js"></script>
<script>
    var facilities_json = {:json_encode($facilities, JSON_UNESCAPED_UNICODE)};

    var app = new Vue({
        el: "#app",
        data: {
            facilities: facilities_json
        },
    });


    layui.use('form', function() {
        var form = layui.form,
            repeat_flag = false; //防重复
        form.render();

        $(".ns-item-block").each(function() {
            var checkCon = $(this).find(".ns-input-checkbox");
            $(this).click(function() {
                if ($(checkCon).is(':checked')) {
                    $(this).find(".layui-form-checkbox").removeClass("layui-form-checked");
                    $(checkCon).prop("checked", false);
                } else {
                    $(this).find(".layui-form-checkbox").addClass("layui-form-checked");
                    $(checkCon).prop("checked", true);
                }
            });

            form.on("checkbox(is_checked)", function(data) {
                $(data.elem).parents(".ns-item-block").click();
            })
        });

        form.on('submit(save)', function(data) {

           /* var obj = $("#promotion_list input:checked");
            var addon_array = [];
            for (var i = 0; i < obj.length; i++) {
                addon_array.push(obj.eq(i).val());
            }
            data.field.addon_array = addon_array.toString();*/
            //app.facilities = facilities;
            data.field.facilities =  JSON.stringify(app.facilities);

            if(repeat_flag) return;
            repeat_flag = true;

            $.ajax({
                url: ns.url("hotel://hotel/roomtype/add"),
                data: data.field,
                dataType: 'JSON',
                type: 'POST',
                success: function(res) {
                    repeat_flag = false;

                    if (res.code == 0) {
                        layer.confirm('添加成功', {
                            title:'操作提示',
                            btn: ['返回列表', '继续添加'],
                            yes: function(){
                                location.href = ns.url("hotel://hotel/roomtype/lists")
                            },
                            btn2: function() {
                                location.href = ns.url("hotel://hotel/roomtype/add")
                            }
                        });
                    }else{
                        layer.msg(res.message);
                    }
                }
            });
        });

        form.verify({
            num: function (value) {
                if (value == '') {
                    return;
                }
                if (value%1 != 0) {
                    return '排序数值必须为整数';
                }
                if (value < 0) {
                    return '排序数值必须为大于0';
                }
            }
        });
    });
</script>
{/block}